<template>
	<view class="details">
		<view class="details-header">
			<image @click="goBack"
				src="https://zsw-bimface-res.izsw.net/img/bim-community/%E5%B7%A6%E7%AE%AD%E5%A4%B4.png" mode="">
			</image>
		</view>
		<view class="details-top-img">

		</view>
		<view class="details-tab">
			<view class="tab-item" :class="{ 'selected': selectedIndex === '奖品全览' }" @click="selectedTab('奖品全览')">
				奖品全览
			</view>
			<view class="tab-item" :class="{ 'selected': selectedIndex === '中奖记录' }" @click="selectedTab('中奖记录')">
				中奖记录
			</view>
		</view>
		<view class="details-tab-content">
			<view class="prize-overview" v-if="selectedIndex == '奖品全览'">
				<view class="commodity-probability">
					<image src="https://zsw-bimface-res.izsw.net/img/bim-community/%E5%B0%8F%E5%9B%BE%E6%A0%87.png"
						mode=""></image>
					商品等级
				</view>
				<view class="prize-overview-content">
					<view class="prize-overview-content-top">
						<view v-for="(item, index) in items" :key="index" :class="{ 'bjimg': item.level === shopId }"
							@click="handleProductProbabilityClick(item)">
							<image :src="item.imgSrc" mode="">
								<text class="name">{{ item.name }}</text>
								<text class="probability">概率：{{ (item.probability * 100).toFixed(2) }}%</text>
						</view>
					</view>
					<view class="prize-overview-content-bottom" v-if="goodsList.length != 0">
						<view class="content" v-for="(item, index) in goodsList" :key="index"
							@click="godetails(item.id)">
							<image :src="item.detailImages" mode="aspectFill">
								<text class="name">{{ item.name }}</text>
								<image class="gradeImg" :src="item.imgSrc" mode=""></image>
								<view class="grade">
									{{ item.grandPrize }}
								</view>
						</view>
					</view>
					<view class="prize-overview-content-else" v-else>
						暂无数据
					</view>
					<view class="bottomLottery">
						<view class="title-c">
							<view class="item" :class="{ actived: type == 1 }" @click="lotteryNum(1)">1发</view>
							<view class="item" :class="{ actived: type == 2 }" @click="lotteryNum(2)">2发</view>
							<view class="item" :class="{ actived: type == 3 }" @click="lotteryNum(3)">3发</view>
							<view class="item" :class="{ actived: type == 4 }" @click="lotteryNum(4)">4发</view>
							<view class="item" :class="{ actived: type == 5 }" @click="lotteryNum(5)">5发</view>
						</view>
						<view class="depositList">
							<span v-for="(tag, tIndex) in moneyList" :key="tIndex" class="el-tag"
								:class="activeIndex == tIndex ? 'active' : ''"
								@click="switchDeposit(tIndex, tag.value)">{{ tag.name }}</span>
							<input class="uni-input" focus placeholder="请输入数量" v-model="custom"
								v-show="activeIndex == '0'" />
						</view>
						<view class="left" @click="makeShot()">
							开始抽盒
						</view>
						<!-- <view class="right" @click="makeShot(5)">
							五连发
						</view> -->
					</view>
				</view>
			</view>
			<view class="record-winning" v-if="selectedIndex == '中奖记录'">
				<view class="commodity-probability">
					<image src="https://zsw-bimface-res.izsw.net/img/bim-community/%E5%B0%8F%E5%9B%BE%E6%A0%87.png"
						mode=""></image>
					中奖记录
				</view>
				<view class="prize-overview-content">
					<view class="prize-overview-content-top">
						<view v-for="(item, index) in items" :key="index" :class="{ 'bjimg': item.level === shopId }"
							@click="handleProductProbabilityClick(item)">
							<image :src="item.imgSrc" mode="">
								<text class="name">{{ item.name }}</text>
								<!-- <text class="probability">概率：{{ item.probability }}%</text> -->
						</view>
					</view>
					<view class="prize-list" v-if="BoxRecordByDay.length != 0" @scroll="handleScroll">
						<view class="content" v-for="(item, index) in BoxRecordByDay" :key="index">
							<image class="left" :src="item.image" mode="aspectFill"
								@click="previewImage(item.image, index)">
								<view class="middle">
									<text class="name">{{ item.skuName }}</text>
									<text class="time">{{ item.winTime }}</text>
								</view>
								<view class="right">
									<view class="photo">
										<image :src="item.userAvatar" mode=""></image>
									</view>
									<view class="name-quantity">
										<view class="name">{{ item.username }}</view>
									</view>
								</view>
								<view class="type">
									{{ item.level }}
								</view>
						</view>
						<view class="reminder">
							--------只展示近期数据--------
						</view>
					</view>
					<view class="prize-overview-content-else" v-else>
						暂无数据
					</view>
				</view>
			</view>
		</view>
		<!-- 盲盒详情 -->
		<uni-popup ref="details" type="bottom">
			<view class="pay" v-if="detailsContent.length">
				<view class="prices">
					<img class="image-price" :src="detailsContent[0].detailImages" alt="" mode="aspectFill" />
					<view class="content">
						<view>
							奖品名称:{{ detailsContent[0].name }}
						</view>
						<view>
							奖品价格:{{ detailsContent[0].moneyPrice }}
						</view>
					</view>
				</view>
				<view v-html="detailsContent[0].description" class="particulars"></view>
			</view>
		</uni-popup>
		<uni-popup style="z-index: 99;" ref="detailPopup" type="bottom">
			<view class="purchasePopup">
				<view class="boxDrawing">
					<view class="boxDrawing_top">
						<image :src="details.thumb" mode=""></image>
						<view class="boxDrawing_list">
							<view class="boxDrawing_name">
								{{ details.name }}
							</view>
							<view class="boxDrawing_content">
								购买无限赏抽{{ num }}发
							</view>
						</view>
					</view>
					<view class="boxDrawing_bottom">
						<view class="boxDrawing_price">
							单价：{{ details.price }}镇北币
						</view>
						<view class="boxDrawing_num">
							<view>共计：{{ num }}件，</view>
							<view>小计：{{ details.price * num }}镇北币</view>
						</view>
					</view>
				</view>

				<view class="choosePayment">
					<view class="payment_cent">
						<view class="">
							选择支付
						</view>
						<view class="">
							支付合计：<text class="jingshi">{{ totalprice }}镇北币</text>
						</view>
					</view>
					<view class="list-item">
						<view class="body">
							<!-- 优惠券 -->
							红包可用
						</view>
						<view class="arrow-right bold" :class="{ disabled: shouldCheckPayment }" v-if="currentCoupon.id"
							@tap="couponsVisible = true">
							<text class="meta red">- ¥{{ currentCoupon.discountMoney }}</text>
							<text class="new-iconfont icon-arrow-right"></text>
						</view>
						<view class="arrow-right" :class="{ disabled: shouldCheckPayment }" v-else
							@tap="couponsVisible = true">
							<text class="meta" v-if="usableCoupons.length">{{ usableCoupons.length }}张可用</text>
							<text class="meta" v-else>无可用</text>
							<text class="new-iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="checkPayment">
						<view class="pay_mode" v-if="integral != 0">
							<view class="weixinPay">
								积分({{ integral }}):
							</view>
							<checkbox color="#6C40FF" :class="{ disabled: isIntegralDisabled }"
								:disabled="isIntegralDisabled" :checked="shouldCheckPayment"
								@click="updateShouldCheck()" background-color="#fff" border-color="#6C40FF"
								activeBackgroundColor="#fff" activeBorderColor="#6C40FF" />
						</view>
					</view>
					<view class="payment_cent" v-if="integralNum">
						<view class="">
							积分扣除:
						</view>
						<view class="" style="color:red">
							-{{ integralNum }}
						</view>
					</view>
					<view class="skip">
						<text>
							<checkbox :checked="skipAnimation" @click="skipCheck()" color="#6C40FF"
								background-color="#fff" border-color="#6C40FF" activeBackgroundColor="#fff"
								activeBorderColor="#6C40FF" />
							<span>跳过动画</span>
						</text>
					</view>
					<view class="agree">
						<text>
							<checkbox color="#6C40FF" :checked="rule" @click="updateRule()" background-color="#fff"
								border-color="#6C40FF" activeBackgroundColor="#fff" activeBorderColor="#6C40FF" />
						</text>
						我已阅读并同意<u @click="goRule()">《镇北魔盒盲盒须知》</u>
					</view>
					<button :disabled="isSubmitting" class="payment_btn" @click="payMent()">
						确认支付
					</button>
				</view>
			</view>
			<!-- <payCard  @close="hideSkuPopup"></payCard> -->
			<!-- <BoxSkuPopup :skuList="info.skus" :detailImageList="info.detailImages" @close="hideSkuPopup"></BoxSkuPopup> -->
		</uni-popup>
		<UsableCouponPopup v-if="couponsVisible" :unusableCoupons="unusableCoupons" :usableCoupons="usableCoupons"
			:currentCoupon="currentCoupon" :totalprice="totalprice" @change="couponChange"
			@close="couponsVisible = false">
		</UsableCouponPopup>
	</view>
</template>

<script>
import {
	boxAll,
	boxDetail,
	userAssert,
	pay,
	skuLevel
} from "@/api/blind.js";
import {
	$getStorage,
	$setStorage,
	$removeStorage
} from "@/utils/auth.js";
export default {
	data() {
		return {
			// selectedTab: '奖品全览', // 默认选中的 tab,
			selectedIndex: '奖品全览',
			isDropdownVisible: false, // 默认不显示下拉框
			// 详情的对象
			details: {},
			items: [],
			// 奖品全揽
			goodsList: [],
			shopId: null, //商品id
			// 余额信息
			Coin: null,
			couponsVisible: false,
			unusableCoupons: [],
			usableCoupons: [],
			currentCoupon: {},
			// 晶石
			spar: {},
			// 中奖记录
			BoxRecordByDay: [],
			// 抽几发
			num: null,
			// boxid
			boxId: null,
			checkPayMent: {
				coin: false,

			},
			totalprice: null,
			rule: false,
			detailsContent: [],
			type: 1,
			moneyList: [{
				name: "输入自定义抽奖次数",
				value: "zdy"
			}],
			activeIndex: 1, //提现选择的下标
			// 选择的晶石数量
			number: null,
			skipAnimation: false,
			custom: null, //输入的晶石数量
			// 积分
			integral: {},
			integralCheck: false,
			integralNum: 0,
			isIntegralDisabled: false,
			// 支付按钮
			isSubmitting: false // 控制按钮是否禁用
		}
	},
	computed: {
		shouldCheckPayment() {
			// 根据积分余额决定多选框是否选中
			return this.integral > 0 && this.integralCheck;
		}
	},
	// 监听积分选择变化
	watch: {
		integralCheck(newVal) {
			// 当多选框状态改变时重新计算总价
			// this.open(this.num);
		},
	},
	created() {

	},
	onLoad(e) {
		this.boxId = e.boxId
		this.getboxDetails()
	},
	onShow() {
		this.getskuLevel();
		this.skipAnimation = $getStorage('skipAnimation') == false ? false : true;   // 跳过动画
	},
	onReachBottom() {
		this.page++;
		this.getBoxRecordByDay();
		// this.loading = false;
		// this.BoxRecordByDay.push(...res.data.list);
	},
	methods: {
		// 积分选择框逻辑
		updateShouldCheck() {
			this.integralCheck = !this.integralCheck;
			this.makeShot(true);
		},
		// 抽几发点击按钮切换
		lotteryNum(num) {
			this.type = num;
			// 在点击的按钮时把自定义输入的数量进行清空操作
			this.custom = ""
		},
		switchDeposit(index, value) {
			this.activeIndex = index
			this.number = value
		},
		// 查看奖品详情
		godetails(id) {
			this.$refs.details.open('bootom')
			this.$http('/new/box/particulars', "get", {
				type: 2,
				id: id
			}).then(res => {
				this.detailsContent = res.data
			})
		},
		previewImage(urls, index) {
			uni.previewImage({
				urls: [urls],
				current: index
			})
		},
		// 盲盒规则
		goRule() {
			uni.navigateTo({
				url: "/pages/rule/rule/rule?id=2"
			})
		},
		selectedTab(item) {
			this.selectedIndex = item
			if (item == "中奖记录") {
				this.getBoxRecordByDay()
			}
		},
		async getskuLevel() {
			await skuLevel({
				type: 2,
				boxId: this.boxId,
				roomId: 2
			}).then(res => {
				this.items = res.data;
				this.items.forEach(item => {
					switch (item.level) {
						case 0:
							item.imgSrc =
								"https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/96541715156051501.png"
							break;
						case 1:
							item.imgSrc =
								"https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/35221715156277602.png"
							break;
						case 2:
							item.imgSrc =
								"https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/34181715156318939.png"
							break;
						case 3:
							item.imgSrc =
								"https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/99931715156376096.png"
							break;
						case 4:
							item.imgSrc =
								"https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/41021715156397303.png"
							break;
						default:
							item.imgSrc = ''; // 如果没有匹配到任何等级，默认设为空字符串
					}
				})
			})
		},
		async getboxDetails() {
			await this.$nextTick(() => {
				this.$refs.mySwiper = this.$refs['mySwiperRef'];
				// 在获取 Swiper 实例后再进行数据请求
				boxDetail({
					boxId: this.boxId,
					level: this.shopId
				}).then(res => {
					this.details = res.data
					this.goodsList = res.data.boxSkuVo;
					this.totalprice = parseFloat((this.details.price * this.num).toFixed(2));
					if (!this.shopId) {
						$setStorage('details', JSON.stringify(this.details));
					}
					this.goodsList.forEach(item => {
						switch (item.grandPrize) {
							case 0:
								item.imgSrc =
									"https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/96541715156051501.png"
								break;
							case 1:
								item.imgSrc =
									"https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/35221715156277602.png"
								break;
							case 2:
								item.imgSrc =
									"https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/34181715156318939.png"
								break;
							case 3:
								item.imgSrc =
									"https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/99931715156376096.png"
								break;
							case 4:
								item.imgSrc =
									"https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/41021715156397303.png"
								break;
							default:
								item.imgSrc = ''; // 如果没有匹配到任何等级，默认设为空字符串
						}
						const grand = this.items.find(items => items
							.level ==
							item
								.grandPrize)
						return item.grandPrize = grand.name
					})
				});
			});
		},
		// 更新付款方式勾选状态
		// updateCheck(key) {
		// 	this.checkPayMent[key] = !this.checkPayMent[key]
		// },
		handleScroll(event) {
			// 通过event.detail.scrollTop 判断是否接近底部
			if (event.currentTarget.scrollTop + event.currentTarget.offsetHeight >= event.currentTarget.scrollHeight) {
				// 触发加载更多数据的操作
				this.onReachBottom();
			}
		},
		//更新勾选协议
		updateRule() {
			this.rule = !this.rule
		},
		skipCheck() {
			this.skipAnimation = !this.skipAnimation
			this.$nextTick(() => {
				$setStorage("skipAnimation", this.skipAnimation);
			})
		},
		// 点击商品概率
		handleProductProbabilityClick(item) {
			this.shopId = item.level
			this.getboxDetails()
			this.getBoxRecordByDay()
		},
		// 红包点击立即使用的方法
		couponChange(e) {
			console.log(e);
			if (e.id === this.currentCoupon.id) {
				// 再次点击取消使用优惠券  // 暂时关闭此功能
				this.currentCoupon = {}
				this.getboxDetails()
				this.isIntegralDisabled = false
			} else {
				this.currentCoupon = e
				this.isIntegralDisabled = true
				if (this.totalprice - this.currentCoupon.discountMoney < 0) {
					this.totalprice = 0
				} else {
					this.totalprice = this.totalprice - this.currentCoupon.discountMoney
				}
			}
		},
		// 无限赏中奖记录
		getBoxRecordByDay() {
			this.$http("/box-record/getBoxRecordByDay", "get", {
				activityName: "无限赏",
				level: this.shopId,
				boxId: this.boxId
			}).then(res => {
				this.BoxRecordByDay = res.data.list
				this.BoxRecordByDay.forEach(item => {
					const Record = this.items.find(items => items.level == item.level)
					return item.level = Record.name
				})

			})
		},
		makeShot(fromCheckbox = false) {
			this.isIntegralDisabled = false
			// 点击来一发显示的弹框
			this.num = this.custom ? this.custom : this.type
			if (this.num >= 1 && this.num <= 100) {
				this.$refs.detailPopup.open('bottom');
				this.currentCoupon = {}
				this.totalprice = parseFloat((this.details.price * this.num).toFixed(2));
				// type:1代表消费盲盒，接口是查询余额接口
				userAssert({
					type: 1
				}).then((res) => {
					this.Coin = res.data || {}
					this.unusableCoupons = res.data.unableCoupons || []
					this.usableCoupons = res.data.availableCoupons || []
					this.integral = res.data.integral.balance || 0
					if (!fromCheckbox) {
						this.integralCheck = this.integral > 0; // 根据积分余额设置选中状态
					}
					// console.log(this.shouldCheckPayment)
					if (this.integralCheck) {
						if ((this.integral / 100) > this.totalprice) {
							this.integralNum = this.totalprice * 100
							this.totalprice = 0
						} else {
							this.integralNum = this.integral
							this.totalprice = (this.totalprice - (this.integral / 100)).toFixed(2)
						}
					} else {
						this.integralNum = 0
						this.totalprice = parseFloat((this.details.price * this.num).toFixed(2));
					}
				})
			} else {
				uni.showToast({
					title: '抽奖次数请输入1-100',
					icon: 'none',
				});
			}
		},
		// 返回上个页面
		goBack() {
			uni.switchTab({
				url: '/pages/index/index',
			});
		},
		// 确认支付方法
		payMent() {
			// 
			let ment = {
				totalMoney: this.details.price * this.num,
				couponsId: this.currentCoupon.id ? this.currentCoupon.id : "",
				payMoney: this.totalprice,
				activiteType: 2,
				integral: this.integralNum,
				payType: 1
			}
			// 支付方式勾选校验
			// if (!Object.values(this.checkPayMent)?.some(item => item.toString() === 'true')) {
			// 	uni.showToast({
			// 		title: "请选择支付方式",
			// 		icon: 'none',
			// 		duration: 2000,
			// 	});
			// 	return
			// }
			// 用户协议勾选校验
			if (!this.rule) {
				uni.showToast({
					title: "请阅读后勾选镇北魔盒盲盒须知再支付",
					icon: 'none',
					duration: 2000,
				});
				return
			}
			if (this.isSubmitting) return; // 如果已经在提交中，直接返回
			this.isSubmitting = true; // 设置按钮为禁用状态
			uni.showLoading({
				title: '正在支付中...'
			})
			// 校验是否还有库存
			this.$http("/new/box/checkStock", "get", {
				boxId: this.boxId,
				type: 2,
				num: this.num
			}).then(res => {
				if (res.code == 200) {
					pay(ment).then((res) => {
						// if (res.code == 200) {
						if (res.message == "账户余额不足") {
							uni.showToast({
								title: "账户余额不足,请前去充值",
								icon: 'none',
								duration: 4000,
							});
							setTimeout(function () {
								uni.navigateTo({
									url: '/pages/myRedpack/index'
								});
							}, 2000);
						} else if (res.code == 500) {
							uni.showToast({
								title: res.message,
								icon: 'none',
							});
						} else {
							// 关闭确认支付的弹框
							this.$refs.detailPopup.close()
							this.isSubmitting = false;
							// 存储盒子信息
							// $setStorage('details', JSON.stringify(this.details));
							uni.hideLoading()
							uni.showToast({
								title: "支付成功，即将跳转",
								icon: 'none',
								duration: 4000,
							});
							let code = res.message
							// this.getAssetRecord(code)
							let that = this
							// 延时跳转到抽奖页面
							setTimeout(function () {
								uni.navigateTo({
									url: '/pages/blind/index2/index2?code=' +
										code +
										"&msg=" + 2 +
										"&num=" + that.num
								});
							}, 2000);
						}
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000,
					});
				}
			})

		},
		// 获取资产记录id方法
		getAssetRecord(code) {
			this.$http("/asset-records/getAssetRecord", "get", {
				uuid: code
			}).then(res => {
				if (res.code == 200) {
					// this.calculate(res.data.id)
				}
			})
		},
		// 计算分销
		calculate(id) {
			this.$http("/brokerage-records/calculate/" + id, "get").then(res => {
				// if(res.code == 200){

				// }
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.depositList {
	padding: 0 60rpx;
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	margin: 15rpx 0;

	.el-tag {
		display: inline-block;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 36rpx;
		border: 2rpx solid #858585;
		color: #858585;
		border-radius: 10rpx;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		font-size: 26rpx;
	}

	.active {
		color: #6c43ff;
		border-color: #6c43ff;
	}

	.uni-input {
		width: 310rpx;
		border: 2rpx solid #858585;
		height: 60rpx;
		border-radius: 8rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		color: #fff;
	}
}

.disabled {
	opacity: 0.5;
	/* 半透明效果 */
	cursor: not-allowed;
	/* 更改鼠标指针 */
	pointer-events: none;
	/* 阻止所有交互 */
}


.title-c {
	display: flex;
	align-items: center;
	width: 90%;
	margin: 20rpx auto;


	.text {
		height: 70upx;
		line-height: 70upx;
		font-size: 34upx;
		font-weight: 500;
		font-size: 35upx;
		font-weight: 100;
		flex-grow: 1;
		color: #fff;
	}

	.item {
		font-size: 26rpx;
		margin-left: 20rpx;
		font-weight: 100;
		color: #fff;
		width: 120rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		background: url('https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/77651724929504782.png') center/ contain no-repeat;

		&.actived {
			box-sizing: border-box;
			font-weight: 100;
			color: #fff;
			background: url('https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/81611724929538814.png') center/ cover no-repeat;
		}
	}
}

.details {
	background-color: #1d0e2c;
	height: 100%;
	overflow-y: auto;

	.details-header {
		width: 100%;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;

		image:nth-child(1) {
			width: 40rpx;
			height: 40rpx;
			margin-left: 20rpx;
		}

		image:nth-child(2) {
			width: 35rpx;
			height: 35rpx;
			margin-right: 30rpx;
		}
	}

	.details-top-img {
		width: 90%;
		height: 500rpx;
		margin: -70rpx auto 0;
		background-image: url('https://zsw-bimface-res.izsw.net/img/bim-community/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240320090108.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.details-tab {
		width: 90%;
		height: 120rpx;
		margin: -40rpx auto 0;
		display: flex;
		align-items: flex-end;

		.tab-item {
			text-align: center;
			width: 50%;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: 1000;
			font-size: 35rpx;
			color: rgb(108, 67, 255);
			// background-image: linear-gradient(70deg, rgb(108, 67, 255), rgb(133, 94, 231));
			// color:transparent;
			// -webkit-background-clip:text;background-clip: text;
			// background-clip: text;
			// background: linear-gradient(70deg, rgb(108, 67, 255), rgb(133, 94, 231));
			//   -webkit-background-clip: text;
			//   -webkit-text-fill-color: transparent;
			background-image: url('https://zsw-bimface-res.izsw.net/img/bim-community/tab%E6%9C%AA%E9%80%89%E4%B8%AD.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.selected {
			width: 50%;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: 1000;
			font-size: 35rpx;
			color: white;
			background-image: url('https://zsw-bimface-res.izsw.net/img/bim-community/tab%E9%80%89%E4%B8%AD.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	}

	.details-tab-content {
		width: 88%;
		margin: 0 auto;

		.commodity-probability {
			width: 100%;
			height: 70rpx;
			color: white;
			display: flex;
			align-items: center;

			image {
				width: 50rpx;
				height: 60rpx;
				margin-right: 25rpx;
			}
		}

		.prize-overview-content {
			width: 100%;

			// overflow-y: auto;
			.prize-overview-content-top {
				width: 100%;
				height: 15%;
				display: flex;
				align-items: center;
				// justify-content: space-between;

				view {
					width: 120rpx;
					height: 120rpx;
					background-image: url('https://zsw-bimface-res.izsw.net/img/bim-community/%E6%9C%AA%E7%82%B9%E5%87%BB.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-content: center;
					margin-right: 20rpx;

					&:last-child {
						margin-right: 0rpx;
					}

					image {
						width: 85rpx;
						height: 45rpx;
					}

					text {
						display: inline-block;
						width: 100%;
						height: 30rpx;
						padding: 0 10rpx;
						color: white;
						text-align: center;
					}

					.name {
						font-size: 23rpx;
					}

					.probability {
						font-size: 15rpx;
					}

				}

				view:last-child {}

				.bjimg {
					background-image: url('https://zsw-bimface-res.izsw.net/img/bim-community/%E5%B7%B2%E7%82%B9%E5%87%BB.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}
			}

			.prize-list {
				width: 100%;
				height: 756rpx;
				margin-top: 20rpx;
				overflow-y: auto;

				.content {
					background-image: url('https://zsw-bimface-res.izsw.net/img/bim-community/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240320160255.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					margin-bottom: 10rpx;
					width: 100%;
					height: 140rpx;
					display: flex;
					align-items: center;
					position: relative;

					.left {
						width: 16%;
						height: 62%;
						margin-left: 20rpx;
					}

					.middle {
						width: 50%;
						height: 140rpx;
						padding: 0 0 0 20rpx;
						display: flex;
						flex-direction: column;
						// margin-left: 30rpx;
						justify-content: space-evenly;

						.name {

							color: white;
							margin-top: 20rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.time {
							display: inline-block;
							color: #ababab;
							// margin-top: -40rpx;
						}

					}

					.right {
						width: 34%;
						height: 100%;
						display: flex;
						font-size: 24rpx;
						align-items: center;

						.photo {
							width: 60rpx;
							height: 60rpx;
							border-radius: 100rpx;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;

							}

						}

						.name-quantity {
							width: 100rpx;
							height: 100%;
							display: flex;
							flex-wrap: wrap;
							align-items: center;
							align-content: center;

							.name {
								height: 40%;
								color: #ababab;
								margin-top: 20rpx;
								margin-left: 10rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.many {
								height: 40%;
								line-height: 40rpx;
								background: linear-gradient(70deg, rgb(108, 67, 255), rgb(133, 94, 231));
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
							}
						}
					}

					.type {
						position: absolute;
						bottom: -10rpx;
						width: 100rpx;
						height: 40rpx;
						left: 20rpx;
						font-weight: bold;
						color: white;
						font-size: 24rpx;
					}
				}

				.reminder {
					width: 90%;
					margin: 50rpx auto;
					color: #ababab;
					font-size: 34rpx;
					text-align: center;
				}
			}

			.prize-overview-content-else {
				text-align: center;
				color: white;
				margin-top: 200rpx;
			}

			.prize-overview-content-bottom {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 40rpx;
				margin-bottom: 300rpx;

				.content {
					width: 48%;
					height: 320rpx;
					background-image: url('https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/61211715153958734.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					margin-bottom: 30rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-content: center;
					position: relative;

					.gradeImg {
						width: 110rpx;
						height: 60rpx;
						position: absolute;
						top: 5rpx;
						left: 10rpx;
					}

					.grade {
						width: 100rpx;
						height: 40rpx;
						color: rgb(199 170 45);
						font-size: 24rpx;
						position: absolute;
						top: 70rpx;
						left: 43rpx;
					}

					image {
						width: 80%;
						height: 200rpx;

					}

					.name {
						width: 50%;
						color: white;
						text-align: center;
						margin-top: 20rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 23rpx;
					}
				}

			}

			.bottomLottery {
				position: fixed;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 300rpx;
				background: rgba(79, 79, 79, 0.7);
				border-radius: 30rpx 30rpx 0 0;
				display: flex;
				flex-direction: column;
				align-items: center;

				.left {
					width: 50%;
					height: 30%;
					background-image: url('https://zsw-bimface-res.izsw.net/img/bim-community/%E5%BA%95%E9%83%A8%E6%8C%89%E9%92%AE.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					color: white;
					font-size: 40rpx;
					font-weight: bold;
					text-align: center;
					// line-height: 90rpx;
					display: flex;
					align-items: flex-start;
					justify-content: center;
				}

				.right {
					width: 36%;
					height: 80%;
					background-image: url('https://zsw-bimface-res.izsw.net/img/bim-community/%E5%BA%95%E9%83%A8%E6%8C%89%E9%92%AE.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					color: white;
					font-size: 40rpx;
					font-weight: bold;
					text-align: center;
					line-height: 90rpx;
				}
			}
		}
	}

	.pay {
		width: 100%;
		height: 600rpx;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		padding: 30rpx 0;
		overflow: auto;

		.prices {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			color: #000;
			margin-bottom: 20rpx;
			font-weight: 100;

			.content {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
			}
		}

		.image-price {
			width: 220rpx;
			height: 220rpx;
		}

		.price {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			color: #000;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				font-weight: 900;
			}
		}

	}

	.purchasePopup {
		width: 100%;
		background-color: rgb(241, 241, 241);
		// border-radius: 50rpx 50rpx 0 0 !important;

		.boxDrawing {
			width: 100%;
			height: 190rpx;
			background-color: #fff;
			padding: 40rpx 25rpx 10rpx 40rpx;

			.boxDrawing_top {
				display: flex;

				image {
					width: 130rpx;
					height: 130rpx;
				}

				.boxDrawing_list {
					height: 130rpx;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.boxDrawing_name {
						font-size: 45rpx;
						font-weight: 600;
					}

					.boxDrawing_content {
						font-size: 35rpx;
						color: rgb(153, 153, 153);
					}

				}

			}

			.boxDrawing_bottom {
				font-size: 30rpx;
				margin-top: 10rpx;
				padding-right: 55rpx;
				display: flex;
				justify-content: space-between;
				color: rgb(153, 153, 153);

				.boxDrawing_num {
					display: flex;

				}
			}

		}

		.choosePayment {
			width: 100%;
			height: 480rpx;
			margin-top: 30rpx;
			background-color: #fff;
			padding: 30rpx;
			font-size: 35rpx;

			.list-item {
				display: flex;
				align-items: center;
				position: relative;
			}

			.list-item .body {
				flex: 1;
				display: flex;
				align-items: center;
			}

			.list-item-title {
				flex: 1;
			}

			.meta {
				font-size: 35rpx;
				// color: #000;
			}

			.payment_cent {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 70rpx;
				padding-right: 35rpx;

				.jingshi {
					font-size: 45rpx;
					color: rgb(108, 67, 255);
					font-weight: 400;
				}
			}

			.checkPayment {
				margin-top: 20rpx;

				.pay_mode {
					padding-right: 55rpx;
					display: flex;
					justify-content: space-between;
					margin: 10rpx 0 10rpx 0;
				}
			}

			.agree {
				color: #000;
				font-size: 25rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					transform: scale(0.6);
					display: block;
				}

				u {
					color: #6C40FF;
				}
			}

			.skip {
				margin: 0 -70rpx;

				text {
					transform: scale(0.8);
					display: block;
					font-size: 36rpx;
					display: flex;
					align-items: center;

					span {
						margin-left: 16rpx;
						line-height: 40rpx;
					}
				}
			}

			.payment_btn {
				width: 670rpx;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				color: #FFF;
				font-weight: bold;
				background: url(../../../../static/seach.png) center/ cover no-repeat;
				margin-top: 50rpx;
				border-radius: 15rpx;
			}
		}
	}
}

.particulars {
	::v-deep &>p {
		width: 100%;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
		}
	}
}
</style>